<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片展示页面模板-03</title>
    <!-- 清除默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 自定义 css 变量 -->
    <link rel="stylesheet" href="./css/variable.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 图标库 -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <!-- 页面 -->
    <div class="page">
        <!-- 背景展示图片 -->
        <img class="img-show" src="./assets/img-01.jpg" alt="">
        <!-- 横向滚动容器 -->
        <div class="scroll hidden">
            <!-- 图片列表显示与隐藏 -->
            <div class="show-hidden">
                <i class='bx bxs-chevrons-up'></i>
            </div>
            <!-- 图片容器 -->
            <div class="img-container">
                <!-- 图片 -->
                <div class="img">
                    <img src="./assets/img-01.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-02.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-03.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-04.jpg" alt="">
                </div>
                <!-- <div class="img">
                    <img src="./assets/img-01.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-02.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-01.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-03.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-02.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-03.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-02.jpg" alt="">
                </div>
                <div class="img">
                    <img src="./assets/img-03.jpg" alt="">
                </div> -->
            </div>
        </div>
    </img>
    <!-- 脚本 -->
    <script src="./js/index.js"></script>
</body>

</html>